<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> 
  <div id="app"> <span>123</span>  hello {{code}}</div> 

  <script src="./dist/vue.js"></script> 


  <script>
    // vue 初次渲染 => 初始化数据 => 模板编译 =>变成render => 生成虚拟节点 =>变成真实DOM => 渲染到页面上

    // vue模板编译  template   render  el(必须有)  
    const  vm = new Vue({
      el: '#app',
      // data:{
      //   msg: 'hello'
      // },
      data(){
        return {
          msg: 'hello',
          a:{
            b:{
              c:123
            }
          },
          lis:[1,2,3],
          list1:[{
            name:'zs',
            age:18
          },
          {
            name:'ls',
            age:19
          }
          ]
        }
      },
      props:{},
      wtach:{}
    })

    console.log(vm.msg);
    // console.log(vm._data);

    // setTimeout(() => {
    //   vm._data.a = {c:30}

    //   vm._data.list1.splice( 1,0, {lis: 'push'})
    //   // vm._data.list1.push( {lis: 'push'},{lis: 'push1'})

    // },2000)


  </script>
  
</body>
</html>